<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>count down</title>
    <script type="text/javascript" src="../vendor/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../vendor/jquery.countdown.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#countdown").countdown('2014/11/11',function(event) {
                var offset=event.offset,
                     $counter=$(this).find(".count>ul");
                $counter.find(".days .counter").text(paddingString(offset.days));
                $counter.find(".hours .counter").text(paddingString(offset.hours));
                $counter.find(".minutes .counter").text(paddingString(offset.minutes));
                $counter.find(".seconds .counter").text(paddingString(offset.seconds));
            });

            function paddingString(str){
                if(typeof  str!=='string'){
                    str=str.toString();
                }
                if(str.length>=2){
                    return str.substr(0,2);
                }else if(str.length===1){
                    return '0'+str;
                }
                return '00';
            }
        });
    </script>
    <style>
        #countdown{
            position: absolute;
            width: 248px;
            height: 125px;
            color: #fff;
            background: #f85032;
            left: 50%;
            top: 50%;
        }

        #countdown .header{            margin: 14px 0;}

        #countdown .header>h2{

            padding-left: 14px;
            margin:0;
        }

        #countdown .count{
            overflow: hidden;
            border-bottom: 1px solid #c41210;
        }

        #countdown .count>ul{
            list-style: none;
            margin: 0;
            padding: 0;
            display: inline-block;
            font-size: 15px;
        }

        #countdown .count>ul>li{
            display: inline-block;
            width: 60px;
            margin: 0;
            padding: 0;
            float: left;
        }

        #countdown .count>ul>li.days{
            padding-left: 14px;
            width: 46px;
        }

        #countdown .count>ul>li.seconds{
            width: 68px;
        }

        #countdown .count .counter,
        #countdown .count .times{
            display: block;
            width:100%;
        }

        #countdown .count .counter{
            font-size: 28px;
            font-weight: bold;
            line-height: 28px;
        }

        #countdown .count .times{
            font-size: 12px;
            line-height: 12px;
        }

        #countdown .footer p{
            font-size: 14px;
            margin: 5px 0;
            padding-left: 14px;
        }
    </style>
</head>
<body>
    <div id="countdown">
        <div class="header">
            <h2>双十一 11.11 SALES</h2>
        </div>
        <div class="count">
            <ul>
                <li class="days">
                    <span class="counter">00</span>
                    <span class="times">DAYS</span>
                </li>
                <li class="hours">
                    <span class="counter">06</span>
                    <span class="times">HOURS</span>
                </li>
                <li class="minutes">
                    <span class="counter">34</span>
                    <span class="times">MINUTES</span>
                </li>
                <li class="seconds">
                    <span class="counter">57</span>
                    <span class="times">SECONDS</span>
                </li>
            </ul>
        </div>
        <div class="footer">
            <p>November 8,2014</p>
        </div>
    </div>
</body>
</html>